<template>
	<view>
		<u-navbar class="nav" :is-back="false" title=" 我的会员" :background="background" height="280" slot>
			<image src="../../static/image/getVip/backWhite.png" class="back" @tap="backFun"></image>
			<text class="title">我的会员</text>
			<view class="header-box">
				<view class="header-left">
					<view class="left-title">
						<view class="vip-imgs">
							<image class="vip-icon1 vip-icon" src="../../static/image/getVip/yonghu2.png" mode="">
							</image>
							<image class="vip-icon2 vip-icon" src="../../static/image/getVip/yonghu4.png" mode="">
							</image>
							<image class="vip-icon3 vip-icon" src="../../static/image/getVip/yonghu5.png" mode="">
							</image>
							<image class="vip-icon4 vip-icon" src="../../static/image/getVip/yonghu6.png" mode="">
							</image>
						</view>
						<text>5593人已经开通了会员</text>
					</view>
					<text class="right-title">购买查询</text>
				</view>

			</view>
			<view class="vip-card">
				<view class="vip-text">
					<text class="login-vip">立即登录</text><text class="vip">会员</text>
					<text class="open-vip">开通会员尊享VIP权益</text>
				</view>
				<image class="vip-user" src="../../static/image/getVip/vip-icon.png" mode=""></image>
				<image class="vip-img" src="../../static/image/getVip/vip-card.png" mode=""></image>
			</view>
		</u-navbar>
		<view class="content">
			<view class="change-buyvip">
				<view class="buy-box1 buy-box " :class="{active:currentClick==index}"
					v-for="(item,index) in vipBuyingList" :key='item._id' @tap='clickChange(index)'>
					<view v-if="item.type">
						<image class="tuijian" src="../../static/image/getVip/tuijian.png" mode=""></image>
						<text class="tuijian-text">推荐</text>
					</view>
					<text class="box-title1">{{item.mouth}}个月</text>
					<text class="box-title2">￥{{item.salePrice}}</text>
					<text class="box-title3">￥{{item.normalPrice}}</text>
				</view>
			</view>

			<view class="congratulation">
				<image src="../../static/image/getVip/congratulate.png"></image>
				<text>您获得2折开通会员特权</text>
			</view>
			<button type="default" @tap='show=true'>立即开通</button>
		</view>

		<u-gap height="20" bg-color="#f6f7f8"></u-gap>
		<!-- 图片 -->
		<view class="vipDeatil"></view>
		<u-gap height="20" bg-color="#f6f7f8"></u-gap>
		<view class="vipGetInfo"></view>


		<!-- 弹出层 -->
		<u-popup v-model="show" mode="bottom" closeable close-icon-pos='top-left' height="700rpx">
			<view class="popupBox">
				<view class="title">开通VIP会员</view>
				<view class="change-buyvip">
					<view class="buy-box1 buy-box " :class="{active:currentClick==index}"
						v-for="(item,index) in vipBuyingList" :key='item._id' @tap='clickChange(index)'>
						<view v-if="item.type">
							<image class="tuijian" src="../../static/image/getVip/tuijian.png" mode=""></image>
							<text class="tuijian-text">推荐</text>
						</view>
						<text class="box-title1">{{item.mouth}}个月</text>
						<text class="box-title2">￥{{item.salePrice}}</text>
						<text class="box-title3">￥{{item.normalPrice}}</text>
					</view>
				</view>
				<view class="congratulation">
					<image src="../../static/image/getVip/congratulate.png"></image>
					<text>开通后立即全站去广告、免费看10000+名厨视频</text>
				</view>
				<button type="default" @tap='payFun'>立即购买</button>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					background: 'url(../../static/image/getVip/vip-background.png) no-repeat',
					backgroundSize: 'contain'
				},
				vipBuyingList: [],
				currentClick: 0,
				show: false,
			}
		},
		methods: {
			clickChange(i) {
				this.currentClick = i
			},
			backFun() {
				uni.navigateBack({})
			},
			topupList() {
				this.$api.my.topupList().then(({ data }) => {
					this.vipBuyingList = data
					console.log(data)
				})
			},
			payFun() {
				let token = uni.getStorageSync('token');
				this.$api.login.getUserInfo(token).then(a => {
					console.log(a[0])

					this.$api.my.openVip({
							_id: a[0]._id,
							date: this.vipBuyingList[this.currentClick].mouth
						})
						.then(res => {
							if(res.code){
								
								uni.navigateTo({ url:'../successPay/successPay?salePrice='+this.vipBuyingList[this.currentClick].salePrice })
							}else{
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error',
								})
							}
							console.log(res);
						})
				})


			}
		},
		onLoad() {
			this.topupList()
		}
	}
</script>

<style lang="scss">
	.nav {
		.back {
			position: absolute;
			top: 20rpx;
			left: 40rpx;
			width: 50rpx;
			height: 50rpx;

		}

		.title {
			position: absolute;
			top: 20rpx;
			left: 300rpx;
			font-size: 36rpx;
			color: #fff;
		}

		.left-title {
			position: absolute;
			top: 150rpx;
			width: 434rpx;
			height: 48rpx;
			background-color: #5c5c5c;
			border-radius: 0rpx 40rpx 40rpx 0rpx;

			text {
				font-size: 24rpx;
				color: #fff;
				line-height: 48rpx;
				margin-left: 150rpx;
			}

			.vip-imgs {
				display: flex;

				.vip-icon {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					top: 8rpx;
					left: 20rpx;
				}

				.vip-icon2 {
					left: 50rpx;
				}

				.vip-icon3 {
					left: 80rpx;
				}

				.vip-icon4 {
					left: 110rpx;
				}
			}
		}

		.right-title {
			position: absolute;
			color: #fff;
			right: -150rpx;
			top: 150rpx;
			font-size: 28rpx;
		}
	}

	.vip-card {
		.vip-img {
			width: 750rpx;
			height: 302rpx;
			margin-top: 200rpx;
		}

		.vip-user {
			position: absolute;
			width: 108rpx;
			height: 108rpx;
			left: 64rpx;
			top: 300rpx
		}

		.vip-text {
			position: absolute;
			left: 190rpx;
			top: 310rpx;

			.login-vip {
				font-size: 40rpx;
				color: #7b5b21;
			}

			.vip {
				display: inline-block;
				width: 106rpx;
				height: 32rpx;
				background-color: #a5a5a5;
				border-radius: 16rpx;
				line-height: 32rpx;
				text-align: center;
				color: #fbedc5;
			}

			.open-vip {
				display: block;
				font-size: 28rpx;
				color: #7b5b21;
			}
		}
	}

	.change-buyvip {
		display: flex;
		justify-content: space-between;

		.buy-box {
			width: 212rpx;
			height: 232rpx;
			border-radius: 16rpx;
			text-align: center;
			background-color: #fbfcfe;
			border: solid 2rpx #e0e0e0;
			position: relative;

			&.active {
				border: solid 2rpx #dcb66a;
				background-color: #fbf7ef;
			}

			.tuijian {
				position: absolute;
				top: -25rpx;
				left: -3rpx;
				width: 98rpx;
				height: 48rpx;

			}

			.tuijian-text {
				position: absolute;
				left: 13rpx;
				top: -20rpx;
				color: #FFFFFF;
			}

			.box-title1 {
				margin-top: 20rpx;
				display: block;
				font-size: 36rpx;
				line-height: 70rpx;
				color: #464646;
				font-weight: bolder;
			}

			.box-title2 {
				display: block;
				font-size: 52rpx;
				color: #deb264;
				line-height: 70rpx;
			}

			.box-title3 {
				display: block;
				font-size: 36rpx;
				color: #a49fa0;
				line-height: 70rpx;
				text-decoration: line-through
			}
		}
	}

	.content {
		padding: 32rpx;

		.congratulation {
			margin-top: 26rpx;
			margin-bottom: 34rpx;
			display: flex;
			align-items: center;
			color: #866935;

			image {
				width: 92rpx;
				height: 42rpx;
				margin-right: 10rpx;
			}
		}

		button {
			background-color: #fcf1d3;
			color: #a98c4f;
			font-weight: bold;
			margin-bottom: 54rpx;
		}

	}

	.vipDeatil {
		margin-top: 10rpx;
		width: 750rpx;
		height: 660rpx;
		background: url(../../static/image/getVip/vipDetail.png) no-repeat;
		background-size: contain;
	}

	.vipGetInfo {
		margin-top: 10rpx;
		width: 750rpx;
		height: 374rpx;
		background: url(../../static/image/getVip/vipGetInfo.png) no-repeat;
		background-size: contain;
	}

	.popupBox {
		padding: 30rpx 30rpx;

		.title {
			text-align: center;
			font-size: 32rpx;
			margin-bottom: 40rpx;
		}

		.congratulation {
			margin-top: 26rpx;
			margin-bottom: 34rpx;
			display: flex;
			align-items: center;
			color: #866935;

			image {
				width: 92rpx;
				height: 42rpx;
				margin-right: 10rpx;
			}
		}

		button {
			background-color: #fcf1d3;
			color: #a98c4f;
			font-weight: bold;
			margin-bottom: 54rpx;
		}
	}
</style>
